<template>
  <!-- 圈子介绍页 -->
  <view class="main">
    <view class="header">
      <view class="top">
        <image
          src="../../images/circle/back.png"
          mode="aspectFill"
          @tap="back()"
          class="left_img"
        ></image>
        <image
          src="../../images/circle/fx.png"
          mode="aspectFill"
          @tap="toShare()"
        ></image>
      </view>
      <view class="bottom">
        <view class="left">
          <image
            v-if="qzDataList.orgUrl"
            :src="qzDataList.orgUrl"
            mode="aspectFill"
          ></image>
          <image
            v-if="qzDataList.orgUrl == ''"
            src="../../images/circle/photo.png"
            mode="aspectFill"
          ></image>
        </view>
        <view class="right">
          <view class="orgName">{{ qzDataList.orgName }}</view>
          <view class="name">
          	<text>圈主：{{ qzDataList.applyName }}</text>
          	<image v-if="qzDataList.verified" src="../../images/circle/v1.png" style="width: 24rpx;height: 24rpx;margin-left: 12rpx;margin-top: 10rpx;" mode="aspectFill"></image>
          </view>
          <view class="label">
            <text
              class="text"
              v-if="qzDataList.friendsLists"
              v-for="item in friendsLists"
              >{{ content(item) }}</text
            >
            <text v-if="!qzDataList.friendsLists">其他</text>
          </view>
        </view>
      </view>
    </view>
    <view class="information">
      <view class="time">
        <view class="text1">刚刚</view>
        <view class="text2">最近更新</view>
      </view>
      <view class="gang"></view>
      <view class="day">
        <view class="text1">{{ qzDataList.operateTime }}</view>
        <view class="text2">已运行(天)</view>
      </view>
      <view class="gang"></view>
      <view class="membership">
        <view class="text1">{{ qzDataList.peopleNumber }}</view>
        <view class="text2">成员</view>
      </view>
      <view class="gang"></view>
      <view class="post">
        <view class="text1">{{ qzDataList.postNumber }}</view>
        <view class="text2">微帖</view>
      </view>
    </view>
    <view class="yinying"></view>
    <view class="content">
      <view class="title">圈子介绍</view>
      <view
        class="text intro-content"
        v-if="qzDataList.circlePromotion"
        v-html="qzDataList.circlePromotion"
      ></view>
      <view class="text1" v-if="qzDataList.circlePromotion == ''">
        欢迎来到商界精英圈子，在这里你可以：
        <br />
        <view class="t2">1、抢先知晓商界精英智慧，大量结交商界精英人脉。</view>
        <view class="t2">2、与各位老板在圈子内交流互动、共同进步。</view>
        <view class="t2">3、打造良心商业生态，撮合生意，实现互利共赢。</view>
      </view>
      <!-- <image class="qz_img" style="margin-top: 28rpx;" :src="qzDataList.coverUrl" mode="aspectFill" v-if="qzDataList.coverUrl"></image> -->
      <view class="title">活跃成员</view>
      <view class="wuCy" v-if="!activeUserList">暂无活跃成员</view>
      <view class="member" v-if="activeUserList">
        <view class="list" v-for="item in activeUserList">
          <view class="left">
            <view class="tou">
              <image
                class="touxiang"
                :src="item.avatarUrl"
                mode="aspectFill"
              ></image>
              <image
                v-if="item.isOrg == 0"
                class="level"
                src="../../images/circle/level.png"
                mode="aspectFill"
              ></image>
            </view>
            <view class="abstract">
              <view class="abstract_t">
                <text class="name">{{ item.applyName }}</text>
                <!-- <text class="phone" v-if="item.isTelphone == 0"
                  >手机：{{ item.telphone }}</text
                > -->
              </view>
              <view class="bot">
                <text class="company">{{ item.company }}</text>
                <text class="position">{{ item.post }}</text>
                <text class="city">{{ item.cityName }}</text>
              </view>
            </view>
          </view>
          <view class="right">
            <!-- <image
              class="phone"
              src="../../images/circle/dianhua.png"
              mode="aspectFill"
            ></image> -->
            <image
              class="card"
              src="../../images/circle/card_.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="meng">
          <view class="text">圈子隐私保护中，加入圈子可查看</view>
          <view class="join">加入圈子</view>
        </view>
      </view>
      <view class="title">圈子玩法</view>
      <view style="padding-right: 36rpx">
        <ol class="ol">
          <li>
            创建或加入感兴趣的圈子，通过圈子连接更多行业大佬，一起交流互动、打怪升级。
          </li>
          <li>话题互动，打造有趣活跃的人脉圈子氛围。</li>
          <li>
            商业交流圈子，连接企业内外生态，关注商业合作伙伴的重要信息，撮合生意。
          </li>
          <li>
            建立人脉圈子阵地，沉淀稳定的人脉关系，高质量内容互动，让圈子更有温度。
          </li>
        </ol>
      </view>
      <view class="title" v-if="qzDataList.chargeType != 0">入圈须知</view>
      <view style="padding-right: 36rpx" v-if="qzDataList.chargeType != 0">
        <ol class="ol">
          <li>
            本圈子收费：
            <text
              >￥{{ qzDataList.chargeAmount }}/{{
                qzDataList.chargeType == 1
                  ? "永久"
                  : qzDataList.chargeCycle + "天"
              }}</text
            >
          </li>
          <li>本圈子内容为虚拟内容服务，加入后概不提供退款服务，请您理解。</li>
          <li>
            加入圈子后，您应遵守相关法律法规，积极打造良好的圈子氛围。杜绝发布垃圾广告、色情、暴力、恐怖等内容，一旦出现以上情形，一起来往
            · 圈子平台及圈主有权对用户做移除处理。
          </li>
        </ol>
      </view>
    </view>
    <!-- 遮罩 -->
    <view class="zhezhao" v-if="zhezhao">
      <view class="center">
        <view class="text">
          您还不是圈子成员
          <br />
          请先加入！
        </view>
        <view class="but" v-if="qzDataList.isUserFriendsPay == 0"
          >加入圈子</view
        >
        <view class="but" v-if="qzDataList.isUserFriendsPay == 1"
          >{{ qzDataList.chargeAmount }}元加入圈子</view
        >
        <image
          class="close"
          src="../../images/circle/close.png"
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <!-- <view class="bottom2">
			<view
				class="botton"
				v-if="qzDataList.isUserFriendsPay == 1 && qzDataList.isOrg == 3"
				>{{ qzDataList.chargeAmount }}元加入圈子</view
			>
			<view
				class="botton"
				v-if="qzDataList.isUserFriendsPay != 1 && qzDataList.isOrg == 3"
				>加入圈子</view
			>
			<view
				class="botton"
				v-if="qzDataList.isUserFriendsPay == 1 && qzDataList.isOrg != 3"
				>{{ qzDataList.chargeAmount }}元加入圈子</view
			>
			<view
				class="botton"
				v-if="qzDataList.isOrg != 3 && qzDataList.isUserFriendsPay == 0"
				>进入圈子</view
			>
		</view> -->
    <!-- 分享提示弹窗 -->
    <view class="fenxiang_" v-if="isFen" @tap="closeShare()">
      <view class="content_">
        <view class="left_">
          <view class="one_">请点击右上角按钮“···”</view>
          <view class="two_">发送给好友，分享到朋友圈</view>
        </view>
        <view class="right_"
          ><image
            src="../../images/aliang/fenxiang.png"
            mode="aspectFill"
          ></image
        ></view>
      </view>
    </view>
    <!-- 验证手机好弹窗 -->
    <view class="phoneBind_" v-if="isBindApp">
      <view class="content_">
        <image src="../../images/aliang/closeBtn.png" mode="aspectFill"></image>
        <view class="title_">请验证手机号</view>
        <view class="row_"
          ><input
            type="number"
            value=""
            placeholder="请输入手机号"
            v-model="phone_"
            maxlength="11"
        /></view>
        <view class="row_">
          <input
            type="number"
            value=""
            placeholder="请输入验证码"
            v-model="code_"
            maxlength="6"
          />
          <text v-if="ishi">获取验证码</text>
          <text class="right" v-if="!ishi">验证码 {{ time }}</text>
        </view>

        <view class="btn_">确定验证码</view>
      </view>
    </view>
    <!-- 无手机号弹窗遮罩 -->
    <view class="wuPhone" v-if="wuPhone">
      <view class="center">
        <image src="../../images/aliang/cha.png" mode="aspectFill"></image>
        <view class="text">
          对方设置了联系方式隐藏，您可
          <br />
          以通过该用户的名片查看更多的
          <br />
          联系方式。
        </view>
        <view class="but">知道了</view>
      </view>
    </view>
  </view>
</template>

<script>
var jweixin = require("jweixin-module");

export default {
  data() {
    return {
      qzDataList: {}, //圈子信息
      zhezhao: false,
      isOrg: true,
      ifOrg: "",
      isBindApp: false, // 是否真实手机号判断
      wuPhone: false,
      activeUserList: [],
      friendsLists: [], // 标签数组
      payDetail: {}, //支付参数
      id: "",
      type: "",
      phone_: "",
      code_: "",
      time: 60,
      ishi: true,
      isFen: false,
      encryptUserId: "", //用户标识
      oneUserdId: "", //接收分享人标识
      isShare: 0,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.type = option.type;
    if (option.isShare == 1) {
      this.isShare = 1;
    }
    if (option.encryptUserId) {
      this.oneUserdId = decodeURIComponent(option.encryptUserId); //分销标识
    }
    let token = uni.getStorageSync("token");
    if (!token && option.isShare == 1) {
      this.handleShareDetail();
    }
    this.qzData2();
  },
  onShow() {
    this.isFen = false;
    let token = uni.getStorageSync("token");
    if (token) {
      this.encryptUserId = uni.getStorageSync("personal").encryptUserId; //本地id
      this.qzData();
      this.qzcyData();
      this.handleShare();
    }
  },
  computed: {
    content() {
      return function (value) {
        if (value.length > 4) {
          return value.substring(0, 4) + "...";
        } else {
          return value;
        }
      };
    },
  },
  methods: {
    closeWuPhone() {
      this.wuPhone = false;
    },
    handleShare() {
      //分享功能
      let that = this;
      this.request({
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });
          jweixin.ready(function () {
            // 判断需要跳转的链接
            //是收费圈子
            var linkUrl =
              that.globalData.domain +
              "/pages/circle/Introduce?id=" +
              that.id +
              "&encryptUserId=" +
              encodeURIComponent(that.encryptUserId) +
              "&isShare=1";

            jweixin.updateAppMessageShareData({
              title: that.qzDataList.orgName, //分享标题
              desc: that.qzDataList.orgIntroduce, // 分享描述
              link: linkUrl,
              imgUrl: that.qzDataList.orgUrl,
            });

            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            jweixin.updateTimelineShareData({
              title: that.qzDataList.orgName, //分享标题
              desc: that.qzDataList.orgIntroduce, // 分享描述
              link: linkUrl, //分享链接
              imgUrl: that.qzDataList.orgUrl, //分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    handleShareDetail() {
      //无token详情
      console.log(this.id);
      this.request({
        url: "h5/org/h5FriendsHomeInfo",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
        },
        data: {
          orgId: this.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.qzDataList = res.data.data;
          this.handleShare(); //分享功能
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });

          if (res.data.msg == "该圈子已注销" || res.data.msg == "圈子不存在") {
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 1000);
          }
        }
      });
    },
    // 圈子基本信息
    qzData() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/orgCircle/friendsHomeInfo",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          orgId: this.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.qzDataList = res.data.data;
          that.friendsLists = res.data.data.friendsLists.slice(0, 4);
          // that.activeUserList = res.data.data.activeUserList.slice(0,4)
          if (res.data.data.isOrg != 3) {
            that.isOrg = false;
            // that.activeUserList = res.data.data.activeUserList
          }
          that.handleShare(); //分享数据
          if (res.data.data.isUserFriendsPay == 1) {
            that.getPayCode(); //获取支付参数
          }
        } else if (res.data.code == 401) {
          that.handleShareDetail();
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
        if (res.data.msg == "该圈子已注销" || res.data.msg == "圈子不存在") {
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 1000);
        }
      });
    },
    qzData2() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/orgCircle/friendsHomeInfo",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          orgId: this.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.ifOrg = res.data.data.isOrg;
        }
      });
    },
    // 判断是否真实手机号
    reaPhone() {
      let token = uni.getStorageSync("token");
      let that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        this.request({
          url: "h5/login/isRealPhone",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          // console.log(res, '检验手机号')
          if (res.data.code == 200) {
            if (res.data.data.isRealPhone) {
              that.isBindApp = false;
              that.payRequest();
            } else {
              that.isBindApp = true;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    // 去圈子
    goQz() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权后在操作!",
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        if (this.isShare == 1) {
          uni.redirectTo({
            url: "/pages/circle/index?id=" + this.id + "&isShare=1",
          });
        } else {
          uni.redirectTo({
            url: "/pages/circle/index?id=" + this.id,
          });
        }
      }
    },
    // 标签页
    toBiaoqian() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权后在操作!",
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        if (this.qzDataList.isOrg == 1) {
          uni.navigateTo({
            url: "/pages/index/customTag?id=" + this.id,
          });
        }
      }
    },
    handleCall(phone, isTelphone) {
      //点击拨打电话
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权后在操作!",
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        let phoneH = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if (
          this.qzDataList.isOrg != 3 &&
          this.qzDataList.isUserFriendsPay != 1
        ) {
          if (isTelphone == 1 || phone == "" || !phoneH.test(phone)) {
            this.wuPhone = true;
            return;
          } else {
            uni.makePhoneCall({
              phoneNumber: phone, //仅为示例
            });
          }
        }
      }
    },
    toCard(id) {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.navigateTo({
          url: "/pages/index/index",
        });
      } else {
        if (
          this.qzDataList.isUserFriendsPay == 1 ||
          this.qzDataList.isOrg == 3
        ) {
          return;
        } else {
          uni.navigateTo({
            url: "/pages/index/personal?id=" + id,
          });
        }
      }
    },
    // 圈子成员
    qzcyData() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/circle/circleActiveMembers",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          circleId: this.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data.length >= 2) {
            that.activeUserList = res.data.data.slice(0, 2);
          } else {
            that.activeUserList = res.data.data;
          }
        }
      });
    },
    noChargeQz() {
      //不收费的圈子加入
      let that = this;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        this.request({
          url: "h5/orgCircle/applyJoinFriends ",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },

          data: {
            orgId: this.id,
            socialId: "",
          },
        }).then((res) => {
          if (res.data.code == 200) {
            uni.showToast({
              title: "加入圈子成功",
              duration: 2000,
              icon: "none",
            });

            setTimeout(() => {
              if (that.isShare == 1) {
                uni.redirectTo({
                  url:
                    "/pages/circle/joinCircle?id=" +
                    that.id +
                    "&isBindApp=" +
                    that.isBindApp +
                    "&isUserFriendsPay=" +
                    that.qzDataList.isUserFriendsPay +
                    "&name=" +
                    that.qzDataList.orgName +
                    "&isShare=1",
                });
              } else {
                uni.redirectTo({
                  url:
                    "/pages/circle/joinCircle?id=" +
                    that.id +
                    "&isBindApp=" +
                    that.isBindApp +
                    "&isUserFriendsPay=" +
                    that.qzDataList.isUserFriendsPay +
                    "&name=" +
                    that.qzDataList.orgName,
                });
              }
            }, 1500);
          } else {
            // console.log(res.data.msg)
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    joinQz() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权后在操作!",
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        if (!this.isBindApp && this.qzDataList.isUserFriendsPay == 1) {
          this.reaPhone();
        } else {
          this.noChargeQz();
        }
      }
      // uni.navigateTo({
      // 	url: '/pages/circle/joinCircle?id=' + this.id + '&money=' + this.qzDataList.chargeAmount + '&isUserFriendsPay=' + this.qzDataList.isUserFriendsPay + '&name=' + this.qzDataList.orgName
      //})
    },
    handleBindApp() {
      let token = uni.getStorageSync("token");
      let that = this;
      if (!token) {
        uni.showToast({
          title: "请授权后在操作!",
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        //点击保存app
        //手机号验证登录
        if (this.phone_ == "") {
          uni.showToast({
            title: "请输入手机号",
            duration: 1000,
            icon: "none",
          });
          return;
        }
        if (this.code_ == "") {
          uni.showToast({
            title: "请输入验证码",
            duration: 1000,
            icon: "none",
          });
          return;
        }
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone_)) {
          uni.showToast({
            title: "手机号格式有误",
            duration: 1000,
            icon: "none",
          });
          return;
        }
        var personal = uni.getStorageSync("personal");
        this.request({
          url: "h5/login/bindTelV2",
          method: "post",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            openId: personal.openId,
            telephone: this.phone_,
            accessToken: personal.accessToken,
            verificationCode: this.code_,
          },
        }).then((res) => {
          that.code_ = "";
          if (res.data.code == 200) {
            uni.showToast({
              title: "绑定成功",
              duration: 3000,
              icon: "none",
            });
            uni.setStorageSync("token", res.data.data.token); //缓存token
            uni.setStorageSync("personal", res.data.data);
            that.reaPhone()(); //再检测
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 3000,
              icon: "none",
            });
            // setTimeout(()=>{
            // 	uni.navigateBack({
            // 		delta: 1,
            // 	})
            // },1000)
          }
        });
      }
    },
    getPhoneCode() {
      //点击获取验证
      let token = uni.getStorageSync("token");
      let that = this;
      if (this.phone_ == "") {
        uni.showToast({
          title: "请输入手机号",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone_)) {
        uni.showToast({
          title: "手机号格式有误",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      this.ishi = false;
      // 掉获取验证码的接口
      this.request({
        url: "h5/login/verificationCode",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          telPhone: this.phone_,
          type: "12",
        },
      }).then((res) => {
        // console.log(res, '验证码')
        if (res.data.code == 200) {
          var time_ed = setInterval(() => {
            //验证码倒计时处理
            var time = that.time;
            if (time == 0) {
              clearInterval(time_ed);
              that.time = 60;
              that.ishi = true;
            } else {
              time--;
              that.time = time;
            }
          }, 1000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    getPayCode() {
      //获取支付参数
      let that = this;
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        this.request({
          url: "h5/orgCircle/pay",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            friendsId: this.id,
            money: String(this.qzDataList.chargeAmount),
            payWay: 4,
            token: token,
            firstDistribution: this.oneUserdId,
            secondDistribution: "",
            socialId: "",
          },
        }).then((res) => {
          // console.log(res, '支付参数')
          if (res.data.code == 200) {
            that.payDetail = res.data.data.prepayDate;
          } else {
            // uni.showToast({
            // 	title: res.data.msg,
            // 	duration: 2000,
            // 	icon: 'none'
            // });
          }
        });
      }
    },
    payRequest() {
      // 支付函数
      let that = this;
      if (!that.payDetail.paySign) {
        return false;
      }
      if (!that.payDetail.timeStamp) {
        return false;
      }
      if (!that.payDetail.nonceStr) {
        return false;
      }
      this.request({
        //获取appid
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          // 'Referer' : 'https://test.yiqilaiwang.com'
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
          });

          jweixin.ready(function () {
            jweixin.checkJsApi({
              jsApiList: ["chooseWXPay"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: (res) => {
                //that.is_rate = true
                // console.log('支付成功')/
                // console.log(res);
              },
              fail: function (res) {
                // console.log('支付失败')
                // console.log(res);
              },
            });

            jweixin.chooseWXPay({
              appId: that.payDetail.appId,
              timestamp: that.payDetail.timeStamp,
              nonceStr: that.payDetail.nonceStr, // 支付签名随机串，不长于 32 位
              package: `prepay_id=${that.payDetail.prepay_id}`, //
              signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: that.payDetail.paySign, // 支付签名
              success: function (res) {
                // console.log(res)
                var route = "payResult" + "?type=1";
                uni.navigateTo({
                  url: route,
                });
                // that.is_rate = true;
                setTimeout(() => {
                  //支付成功跳圈子主页
                  if (that.ifOrg != 3) {
                    if (that.isShare == 1) {
                      uni.redirectTo({
                        url: "/pages/circle/index?id=" + that.id + "&isShare=1",
                      });
                    } else {
                      uni.redirectTo({
                        url: "/pages/circle/index?id=" + that.id,
                      });
                    }
                  } else {
                    if (that.isShare == 1) {
                      uni.redirectTo({
                        url:
                          "/pages/circle/joinCircle?id=" +
                          that.id +
                          "&isBindApp=" +
                          that.isBindApp +
                          "&isUserFriendsPay=" +
                          that.qzDataList.isUserFriendsPay +
                          "&name=" +
                          that.qzDataList.orgName +
                          "&isShare=1",
                      });
                    } else {
                      uni.redirectTo({
                        url:
                          "/pages/circle/joinCircle?id=" +
                          that.id +
                          "&isBindApp=" +
                          that.isBindApp +
                          "&isUserFriendsPay=" +
                          that.qzDataList.isUserFriendsPay +
                          "&name=" +
                          that.qzDataList.orgName,
                      });
                    }
                  }
                }, 1500);
              },
              cancel: function (r) {
                var route = "payResult" + "?type=2";
                uni.navigateTo({
                  url: route,
                });
              },
              fail: function (res) {
                console.log(res);
                var route = "payResult" + "?type=0";
                uni.navigateTo({
                  url: route,
                });
              },
            });
          });
          jweixin.error(function (res) {
            // uni.showToast({
            // 	icon: 'none',
            // 	title: '支付失败了',
            // 	duration: 4000
            // });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 1500,
            icon: "none",
          });
        }
      });
    },
    toShare() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权后在操作!",
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        this.isFen = true;
      }
    },
    clocePhone() {
      this.isBindApp = false;
    },
    closeShare() {
      this.isFen = false;
    },
    back() {
      if (this.isShare == 1) {
        uni.navigateTo({
          url: "/pages/index/index",
        });
        return false;
      }
      window.history.go(-1);
      // uni.navigateBack({
      //   delta: 1,
      // });
    },
    noQzcy() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.navigateTo({
          url: "/pages/index/index",
        });
      } else {
        if (this.isOrg) {
          this.zhezhao = true;
        }
      }
    },
    closeZhezhao() {
      this.zhezhao = false;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 168rpx;
  box-sizing: border-box;
}

.wuCy {
  width: 100%;
  height: 100rpx;
  text-align: center;
  line-height: 180rpx;
  color: #999999;
  font-size: 28rpx;
}
.wuPhone {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);

  .center {
    width: 540rpx;
    height: 385rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    padding: 40rpx;
    padding-top: 80rpx;
    box-sizing: border-box;

    // text-align: center;
    > image {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      width: 23rpx;
      height: 23rpx;
    }

    .text {
      font-size: 32rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #111111;
      line-height: 45rpx;
    }

    .but {
      margin-top: 55rpx;
      width: 460rpx;
      height: 80rpx;
      background: #0f6ede;
      border-radius: 8rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
    }

    .close {
      width: 38rpx;
      height: 38rpx;
      position: absolute;
      top: 30rpx;
      right: 30rpx;
    }
  }
}

.phoneBind_ {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);

  .content_ {
    padding: 50rpx 24rpx;
    padding-bottom: 36rpx;
    box-sizing: border-box;
    position: absolute;
    width: 614rpx;
    height: 522rpx;
    background: #ffffff;
    border-radius: 8rpx;
    top: 300rpx;
    left: 50%;
    transform: translateX(-50%);

    > image {
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      top: 30rpx;
      right: 30rpx;
    }

    .title_ {
      text-align: center;
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #111111;
      margin-bottom: 55rpx;
    }

    .row_ {
      height: 110rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #ddd;
      font-size: 34rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;

      text {
        font-size: 32rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #0f6ede;
      }
    }

    .btn_ {
      margin-top: 50rpx;
      width: 566rpx;
      height: 80rpx;
      background: #0f6ede;
      border-radius: 8rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
  }
}

.fenxiang_ {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);

  .content_ {
    width: 690rpx;
    height: 200rpx;
    background: #ffffff;
    border-radius: 8rpx;
    position: absolute;
    top: 30rpx;
    left: 32rpx;
    padding: 46rpx 32rpx;
    padding-right: 56rpx;
    box-sizing: border-box;
    z-index: 9999;
    display: flex;
    justify-content: space-between;

    .left_ {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .one_ {
        font-size: 36rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        // text-align: center;
        color: #000000;
      }

      .two_ {
        font-size: 32rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        // text-align: center;
        color: #999999;
      }
    }

    .right_ {
      height: 69rpx;
      width: 70rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.header {
  width: 100%;
  // height: 362rpx;
  padding-bottom: 60rpx;
  background: url(../../images/circle/background.png);
  background-size: 100% 100%;
  .top {
    width: 100%;
    height: 103rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;

    image {
      width: 60rpx;
      height: 60rpx;
    }
    .left_img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 36rpx;

    .left {
      height: 150rpx;
      margin-right: 30rpx;

      image {
        width: 148rpx;
        height: 148rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.26);
        border-radius: 12rpx;
        box-shadow: 0rpx 18rpx 18rpx -12rpx rgba(17, 17, 17, 0.15);
      }
    }

    .right {
      // height: 150rpx;

      .orgName {
        font-size: 44rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #ffffff;
      }

      .name {
        font-size: 24rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #ffffff;
        margin-top: 4rpx;
      }

      .label {
        margin-top: 10rpx;

        .text {
          height: 38rpx;
          padding: 0 8rpx;
          background: rgba(240, 247, 255, 0.14);
          border-radius: 8rpx;
          margin-right: 12rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}

.information {
  width: 100%;
  height: 165rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36rpx;
  box-sizing: border-box;

  .gang {
    width: 2rpx;
    height: 42rpx;
    background-color: #dddddd;
  }

  .time,
  .day,
  .membership,
  .post {
    text-align: center;

    .text1 {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #111111;
    }

    .text2 {
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #999999;
      margin-top: 8rpx;
    }
  }
  .time {
    text-align: left;
  }
  .post {
    text-align: right;
  }
}

.yinying {
  width: 100%;
  height: 14rpx;
  background: #f5f5f5;
}

.content {
  box-sizing: border-box;

  .title {
    width: 678rpx;
    height: 80rpx;
    font-size: 36rpx;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: bold;
    color: #111111;
    border-bottom: 1px solid #dddddd;
    margin-top: 70rpx;
    margin-left: 36rpx;
    box-sizing: border-box;
  }

  .text,
  .text1 {
    white-space: normal;
    word-break: break-all;
    word-warp: break-word;
    font-size: 34rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #111111;
    line-height: 48rpx;
    padding: 30rpx 36rpx 0 36rpx;
  }
  .text1 {
    .t2 {
      font-size: 30rpx;
      line-height: 36rpx;
      margin-top: 14rpx;
    }
  }

  .qz_img {
    width: 678rpx;
    height: 524rpx;
    padding: 0 36rpx;
  }

  .member {
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 36rpx;

      .left {
        display: flex;

        .tou {
          width: 88rpx;
          height: 88rpx;
          position: relative;
          margin-right: 22rpx;

          .touxiang {
            width: 88rpx;
            height: 88rpx;
            border-radius: 4rpx;
          }

          .level {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            bottom: -8rpx;
            right: -8rpx;
          }
        }

        .abstract {
          height: 88rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .abstract_t {
            display: flex;
            align-items: center;
          }
          .name {
            max-width: 220rpx;
            font-size: 32rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #111111;
            line-height: 45rpx;
            margin-right: 18rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          .phone,
          .bot {
            font-size: 24rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #999999;
            line-height: 33rpx;
          }
          .bot {
            display: flex;
            align-items: center;
            .company {
              max-width: 196rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }

          .position {
            margin: 0 30rpx;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;

        .phone {
          width: 30rpx;
          height: 30rpx;
          margin-right: 34rpx;
        }
        .card {
          width: 38rpx;
          height: 30rpx;
        }
      }
    }

    .meng {
      width: 100%;
      height: 388rpx;
      background: url(../../images/circle/member_background.png);
      background-size: 100% 388rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .text {
        font-size: 36rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #111111;
        margin: 109rpx 0 56rpx 0;
      }

      .join {
        width: 192rpx;
        height: 72rpx;
        background: #0f6ede;
        border-radius: 8rpx;
        font-size: 30rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 72rpx;
      }
    }
  }

  .ol {
    li {
      margin-top: 30rpx;
    }

    text {
      font-size: 34rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #db361f;
    }
  }
  .intro-content {
    white-space: pre-wrap;
    letter-spacing: 0.06rem;
    /deep/ img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    /deep/ video {
      width: 100%;
      max-width: 100%;
    }
    /deep/ blockquote {
      border-left: 2px solid #ccc;
      margin-left: 1.5rem;
      padding-left: 1rem;
    }
    /deep/ .right {
      display: none;
    }
    /deep/ * {
      font-size: 34rpx !important;
      line-height: 48rpx !important;
      font-family: PingFangSC, PingFangSC-Regular !important;
      text-align: justify !important;
      font-weight: 400 !important;
    }
    /deep/ .text {
      width: calc(100% - 44px);
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: rgb(17, 17, 17);
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      line-height: 24px !important;
      font-size: 15px !important;
      word-break: break-all;
    }
  }
}

.bottom2 {
  width: 100%;
  height: 98rpx;
  border-top: 1rpx solid #dddddd;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;

  .botton {
    width: 700rpx;
    height: 80rpx;
    background: #0f6ede;
    border-radius: 8rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #ffffff;
  }
}

.zhezhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);

  .center {
    width: 614rpx;
    height: 410rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 8rpx;
    position: absolute;
    top: 50vh;
    left: 68rpx;
    margin-top: -205rpx;
    text-align: center;

    .text {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #111111;
      line-height: 50rpx;
      margin-top: 101rpx;
    }

    .but {
      width: 566rpx;
      height: 80rpx;
      background: #0f6ede;
      border-radius: 8rpx;
      margin: 0 auto;
      margin-top: 93rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      line-height: 80rpx;
      color: #ffffff;
    }

    .close {
      width: 38rpx;
      height: 38rpx;
      position: absolute;
      top: 30rpx;
      right: 30rpx;
    }
  }
}
</style>
